<template>
  <div id="msg" v-if="msgCount == 0">
  </div>
</template>

<style lang='less'>
</style>

<script>
import Vue from "vue";
import { mapState } from "vuex";
import { ToastPlugin } from "vux";

// 默认参数
// Vue.use(ToastPlugin, { position: "bottom", type: "text" });
Vue.use(ToastPlugin);

export default {
  name: "MyMsg",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      // 映射 this.count 为 store.state.msg.count
      count: state => state.msg.count,
      type: state => state.msg.type,
      messagecode: state => state.msg.messagecode,
      message: state => state.msg.message,
      time: state => state.msg.time,
      position: state => state.msg.position,
      needRedirect: state => state.msg.needRedirect,
      redirectPathName: state => state.msg.redirectPathName,
      needGoBack: state => state.msg.needGoBack
    }),
    msgCount() {
      // const _this = this;
      // i18n
      let messagei18n;
      if (this.messagecode) {
        messagei18n = this.$t(`m.${this.messagecode}`);
        console.log(messagei18n);
      }

      if (this.count > 0) {
        console.log("this is a message");
        let param = {
          text: messagei18n || this.message,
          time: this.time,
          type: this.type,
          position: this.position,
          width: this.type == "warn" ? "11.4em" : "7.6em"
        };
        if (this.needRedirect && this.redirectPathName.length > 0) {
          param.onHide = () =>
            this.$router.replace({ name: this.redirectPathName });
        }
        if (this.needGoBack) {
          param.onHide = () => this.$router.go(-1);
        }
        console.log("message param:", param);
        this.$vux.toast.show(param);
      }
      return this.count;
    }
  },
  methods: {}
};
</script>
